<template>
	<view class="page">
		<backTop v-if='toTop'></backTop>
		<status-bar title="渠道销量"></status-bar>
		<view class="screen flex-box align-center":style="{'top':navHeight+System.statusBarHeight+'px'}" v-if='masters && masters.length > 0'>
			<scroll-view scroll-x="true" class="flex fans_list" :scroll-into-view="'intro-'+viewIntro" :scroll-with-animation='true'>
				<view :class="{thmeBg: v_id == my_v_id}" id='intro--1' @click="scrollCheck(-1,'')" :style="{'--color': color}">全部</view>
				<view v-for="(itm,i) in masters" :key='i' :class="{
					thmeBg: v_id == itm.v_id
				}" :id='"intro-"+i' @click="scrollCheck(i,itm.v_id)" :style="{'--color': color}">{{ itm.name }}</view>
			</scroll-view>
			<view @click="checkScreen=true">
				<text>筛选</text>
				<image class="Icon" :src="staticUrl+'/images/jh_up/icon-1005.png'" mode="aspectFit"></image>
			</view>
		</view>
		
		<view class="mask mask-screen" v-if='checkScreen' @click="checkScreen=false">
			<view class="classify2" :style="{'padding-top':navHeight+'px'}" @click.stop>
				<view class="close-box flex-box align-center" @click="checkScreen=false">
					<text class="iconfont icon-guanbi1"></text>
				</view>
				<view class="flex" style="overflow:hidden auto;">
					<view class="list">
						<view @click="chkClassify('')" :style="{'--color': color}" :class="v_id == my_v_id?'thmeBg':''" class="txt">全部</view>
						<view @click="chkClassify(item.v_id)" :style="{'--color': color}" :class="v_id == item.v_id?'thmeBg':''"
						v-for="(item,index) in masters" :key='index' class="txt">{{item.name}}</view>
					</view>
				</view>
				<!-- <view class="btns flex-box">
					<view @click="reset(1)">重置</view>
					<view class="thmeBg" :style="{'--color': color}" @click="reset(2)">确定</view>
				</view> -->
			</view>
		</view>
		<view class="list" v-if='list && list.length > 0' :class="{
			noList: masters && masters.length > 0
		}">
			<view class="item flex-box" v-for="(item,i) in list" :key='i'>
				<image :src="item.v_headimg?item.v_headimg:staticUrl+'/images/jh_up/head.jpg'" mode="aspectFill" class="avatar"></image>
				<view>
					<view class="address">{{ item.add_time }}</view>
					<view class="date">订单号：{{ item.order_code }}</view>
					<view class="date">订单金额：<text>{{ item.payment }}元</text></view>
					<view class="date">订单佣金：<text>{{ item.money }}元</text></view>
				</view>
			</view>
		</view>
		<empty type='1' msg='这里空空如也 ~' cat='4' v-if='noData'></empty>
		<view class="DiLine" v-if='showDiLine'>------我也是有底线的------</view>
	</view>
</template>

<script>
	let that
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				toTop: false,
				
				color: getApp().globalData.color,
				staticUrl: this.staticUrl,
				imgUrl: this.imgUrl,
				checkScreen: false,
				noData: false,
				currID:0,
				viewIntro: 999,
				my_v_id: uni.getStorageSync('vid'),
				v_id: uni.getStorageSync('vid'),
				pageNum: 10,
				page: 1,
				masters: '',
				more: false,
				list: [],
				showDiLine: false
			}
		},
		onLoad(e) {
			that = this
			if(e.vid){
				that.v_id = e.vid
			}
			that.get_sale_channel()
		},
		methods: {
			get_sale_channel: function() {
				that.noData = false
				that.more = false
				that.showDiLine = false
				that.$http.get({
					url: '/singleSaleApi/get_sale_channel',
					data: {
						bid: uni.getStorageSync('bid'),
						share_v_id: that.v_id,
						page: that.page,
						pageNum: that.pageNum
					}
				}).then(res => {
					if (res.code == 100) {
						if(res.data && res.data.masters)
							that.masters = res.data.masters
						if(res.data){
							if(res.data.orders){
								that.list = that.list.concat(res.data.orders)
							}
							if(res.data.orders && res.data.orders.length > that.pageNum - 1){
								that.more = true
								that.page ++
							}
						}
						if(!that.list || that.list.length < 1){
							that.noData = true
						}
						if(!that.more && that.page > 1){
							that.showDiLine = true
						}
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 2000
						})
					}
				})
			},
			scrollCheck(i,v_id){
				that.currID = i
				if(i>that.viewIntro){
					that.viewIntro = i
				}else{
					if(i>0)
						that.viewIntro = i-1
				}
				that.page = 1
				that.list = []
				that.v_id = v_id
				if(v_id == '')
					that.v_id = uni.getStorageSync('vid')
				that.get_sale_channel()
			},
			chkClassify(v_id){
				that.page = 1
				that.list = []
				that.v_id = that.v_id == v_id?'':v_id
				if(that.v_id == '')
					that.v_id = uni.getStorageSync('vid')
				that.get_sale_channel()
				that.checkScreen = false
			}
		},
		computed:{
			...mapState(['tabTitle','color','city','navHeight','System','share']),
		},
		onReachBottom() {
			if(this.more){
				this.get_sale_channel()
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 250) {
				this.toTop = true;
			} else {
				this.toTop = false
			}
		},
		onShareAppMessage() {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid')
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid,
				imageUrl: shareData.imageUrl
			}
		},
	}
</script>

<style lang="scss">
.page{
	background-color: #F5F5F5;
	.screen{
		height: 64rpx;
		background-color: #FFFFFF;
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 3;
		.fans_list{
			height: 64rpx;
			box-sizing: border-box;
			white-space: nowrap;
			padding: 10rpx 0 0 30rpx;
			width: calc(100% - 142rpx);
			view{
				display: inline-block;
				min-width: 132rpx;
				text-align: center;
				line-height: 44rpx;
				border-radius: 44rpx;
				margin-right: 20rpx;
				color: #333333;
				font-size: 26rpx;
				&.thmeBg{
					color: white;
				}
				// &:nth-child(1){
				// 	margin-left: 30rpx;
				// }
			}
		}
		>view{
			width: 142rpx;
			text-align: center;
			text{
				font-weight: bold;
				font-size: 28rpx;
			}
			.Icon{
				width: 30rpx;
				height: 28rpx;
				margin-left: 10rpx;
			}
		}
		
	}
	
	.mask-screen{
		z-index: 108;
		overflow: hidden;
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		.classify2{
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			height: 100%;
			width: 500rpx;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			.list-title{
				font-size: 26rpx;
				font-weight: 700;
				padding: 10rpx $uni-page-space;
			}
			@keyframes show{
				0%{
					right: -500rpx;
				}
				100%{
					right: 0;
				}
			}
			animation: show .2s linear;
			.close-box{
				height: 70rpx;
				padding-right: $uni-page-space;
				justify-content: flex-end;
				.icon-guanbi1{
					font-size: 30rpx;
				}
			}
			.list{
				flex: 1;
				overflow-y: auto;
				padding: 10rpx $uni-page-space;
				margin-right: -20rpx;
				margin-top: 20rpx;
				.txt{
					display: inline-block;
					color: #333333;
					padding: 0 20rpx;
					margin: 0 20rpx 20rpx 0;
					line-height: 50rpx;
					background-color: #EEEEEE;
					border-radius: 40rpx;
					min-width: 124rpx;
					text-align: center;
				}
				.thmeBg{
					color: #FFFFFF;
				}
			}
			.price-chk{
				align-items: center;
				view{
					text-align: center;
					input{
						height: 50rpx;
						line-height: 50rpx;
					}
				}
				
				.mid{
					height: 1px;
					width: 24rpx;
					margin: 0 20rpx 20rpx 0;
					background-color: #EEEEEE;
				}
			}
			.btns{
				height: 120rpx;
				padding: 0 20rpx;
				align-items: center;
				justify-content: center;
				border-top: 1px solid #EEEEEE;
				view{
					line-height: 56rpx;
					flex: 1;
					text-align: center;
					border-radius: 56rpx;
					margin: 0 20rpx;
					&:nth-child(1){
						border: 1px solid #EEEEEE;
						color: #333333;
					}
					&:nth-child(2){
						color: white;
					}
				}
			}
		}
	}
	
	.list{
		padding: 20rpx;
		&.noList{
			padding-top: 84rpx;
		}
		text,view{
			color: #333333;
			font-size: 28rpx;
		}
		.item{
			background-color: #FFFFFF;
			border-radius: 16rpx;
			padding: 20rpx;
			position: relative;
			margin-bottom: 20rpx;
			.avatar{
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			>view{
				width: calc(100% - 84rpx);
				.address{
					font-weight: bold;
				}
				.date{
					margin-top: 8rpx;
					color: #666666;
					font-size: 24rpx;
					text{
						color: #D13703;
						font-size: 24rpx;
					}
				}
			}
			
		}
	}
}
</style>
